import { Component, ElementRef, Renderer2 } from '@angular/core';
import {ApesField} from '@shared/ui-zorro/src/types/apes-field';
import {ApiService} from '@core/services/http/api.service';
import {Events} from '@core/services/events/Events';
import {ExpressionService} from '@core/services/expression/ExpressionService';
import {SubjectService} from '@core/services/events/subject.service';
import {exists} from '../../../../utils/utils';
import { toBoolean } from '@shared/apes/core';

@Component({
  selector: 'formly-field-span',
  template: `
    <apes-span [formControl]="formControl"
               [displayFormat]="display"
               [formlyAttributes]="field"
               [style]="style"
               [ctx]="formState"
               [showHidden]="showHidden"
               [showTooltip]="showTooltip"
               [hiddenRegExp]="hiddenRegExp"
               [showIcon]="to.showIcon"
               [showIconTooltipFormatter]="to.showIconTooltip"
               [replaceValue]="replaceValue"></apes-span>
  `
})
export class FormlyFieldSpan extends ApesField {

  constructor(protected apiService: ApiService, protected events: Events, protected expressionService: ExpressionService, protected subject: SubjectService,protected elementRef: ElementRef, protected renderer: Renderer2) {
    super(apiService, events, expressionService, subject);
  }

  ngOnInit(): void {
    this.addEventListener(this.elementRef, this.renderer);
  }

  get display() {
    return exists(this.to.valueFormatter) ? [this.to.valueFormatter] : ['value.name'];
  }

  get style() {
    return this.to.style ? this.to.style : null;
  }

  get showHidden() {
    return this.to.showHidden ? toBoolean(this.to.showHidden) : null;
  }

  get showTooltip() {
    return this.to.showTooltip ? toBoolean(this.to.showTooltip) : null;
  }

  get hiddenRegExp() {
    return this.to.hiddenRegExp ? this.to.hiddenRegExp : null;
  }

  get replaceValue() {
    return this.to.replaceValue ? this.to.replaceValue : null;
  }
}
